<template>
	<uni-popup ref="popup" type="dialog" :mask-click="false">
		<view class="container align-center flex-col">
			<image class="img-close" src="@/static/login/guanbi.png" @click="close"></image>
			<text class="title">
				登录保存做题记录
			</text>
			<text class="desc">
				登录后自动保存考试成绩和练习记录，避免丢失
			</text>
			<image class="synchronization" src="@/static/login/tu.png"></image>
			<view class="btn center" @click="quickLogin">快捷登录</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
      /**
       * 点击右上角关闭按钮的回调
       * @param closeCB
       */
			open(closeCB) {
        this._closeCB = closeCB
				this.$refs.popup.open()
			},
			close() {
        if(this._closeCB) {
          this._closeCB()
        }
				this.$refs.popup.close()
        this._closeCB = null
      },
      quickLogin() {
        this.$refs.popup.close()
        this.$emit('quick')
      }
		}
	}
</script>

<style scoped lang='scss'>
	.container {
		width: 578upx;
		background-color: #fff;
		border-radius: 24upx;

		.img-close {
			position: absolute;
			top: 36upx;
			right: 36upx;
			width: 26upx;
			height: 26upx;
		}

		.title {
			margin-top: 56upx;
			margin-bottom: 20upx;
			font-family: PingFangSC-Medium;
			font-size: 36upx;
			color: #000;
		}

		.desc {
			margin-left: 44upx;
			margin-right: 44upx;
			font-family: PingFangSC-Regular;
			line-height: 50upx;
			font-size: 30upx;
			color: #878787;
		}

		.synchronization {
			margin-top: 16upx;
			margin-bottom: 44upx;
			width: 220upx;
			height: 220upx;
		}

		.btn {
			width: 392upx;
			height: 92upx;
			margin-bottom: 56upx;
			border-radius: 46upx;
			background-color: #3073F6;
			font-family: PingFangSC-Regular;
			font-size: 32upx;
			color: #fff;
		}
	}
</style>
